<template>
	<!-- <view class="tab-custom"> -->
	<view :class="[scroll ? 'tab-custom-scroll' : ' tab-custom']">
		<view
			:class="[currentActive == index ? 'tab-item-active' : 'tab-item', badges.indexOf(index) !== -1 ? 'tab-item-badge' : '',scroll ? 'tab-custom-scroll-item' : '']"
			:style="useTheme.theme" v-for="(item, index) in tabs" :key="index" @click="handleTabClick(index)">{{item}}
		</view>
	</view>
</template>
<script setup lang="ts">
	import { reactive, ref, computed, watch, withDefaults } from 'vue';
	import useThemeStore from '@/store/theme';
	const useTheme = useThemeStore();
	const props = withDefaults(defineProps<{
		tabActive : number, //选中索引
		tabs ?: string[], //下拉选择项
		badges ?: number[], //红点的标记
		scroll ?: boolean, //红点的标记
	}>(), {
		tabActive: 0,
		tabs: () => [],
		badges: () => [],
		scroll: false,
	});
	// 修改tabActive的值
	const currentActive = ref(props.tabActive);

	// 下拉选择-同步更新，返回按钮事件
	const emit = defineEmits(["tabChange"]);

	// 监听tabActive值的变化
	watch(() => props.tabActive, (val) => {
		currentActive.value = val;
	});

	// tab点击切换
	function handleTabClick(e : number) {
		currentActive.value = e;
		emit("tabChange", e);
	}
</script>
<style lang="scss" scoped>
	.tab-custom,
	.tab-custom-scroll {
		position: relative;
		// z-index: 101;
		height: 40px;
		display: flex;
		justify-content: space-around;
		align-items: flex-end;
		background-color: transparent;
		border-bottom: 1px solid #ccc;


		.tab-item,
		.tab-item-active,
		.tab-item-badge {
			position: relative;
			padding-bottom: 10px;
			color: #666;
			font-size: 14px;
			text-align: center;
			display: block;

			&::before {
				content: "";
				position: absolute;
				left: calc(50% - 15px);
				bottom: 0;
				width: 30px;
				height: 5px;
				background-color: transparent;
			}
		}

		.tab-custom-scroll-item {
			padding-left: 20rpx;

			&:first-child {
				padding-left: 25rpx;
			}

			&:last-child {
				padding-right: 25rpx;
			}
		}

		.tab-item-active {
			color: $theme-color;
			font-weight: 600;
		}

		.tab-item-active::before {
			background-color: $theme-color;
		}

		.tab-item-badge::after {
			content: "";
			position: absolute;
			top: 0;
			right: -5px;
			width: 5px;
			height: 5px;
			border-radius: 5px;
			background-color: #FC4A2E;
		}
	}

	.tab-custom-scroll {
		justify-content: space-between;
		align-items: flex-end;
		border-bottom: 0rpx;
	}
</style>